<template>
    <div class="header-search-wrap">
        <div class="left-content">
            <el-form :model="formData" inline>
                <el-form-item label="标题">
                    <el-input
                        class="w150"
                        v-model.trim="formData.title"
                        maxlength="200"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
                <!-- Banner -->
                <el-form-item label="创建者姓名">
                    <el-input
                        class="w150"
                        v-model.trim="formData.createName"
                        maxlength="200"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="创建来源">
                    <el-input
                        class="w150"
                        v-model.trim="formData.createSource"
                        maxlength="200"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="发布状态">
                    <el-select
                        class="w100"
                        v-model="formData.releaseStatus"
                        placeholder="请选择">
                        <el-option
                            v-for="item in statusList"
                            :key="item.id"
                            :label="item.orgName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                 <el-form-item label="发布位置">
                    <el-select
                        class="w100"
                        v-model="formData.releasePosition"
                        placeholder="请选择">
                        <el-option
                            v-for="item in positionList"
                            :key="item.id"
                            :label="item.orgName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="置顶状态">
                    <el-select
                        class="w100"
                        v-model="formData.toppingStatus"
                        placeholder="请选择">
                        <el-option
                            v-for="item in toppingList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="formData.createTime"
                        type="daterange"
                        range-separator="~"
                        start-placeholder="请选择"
                        end-placeholder="请选择"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="right-content">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="clear">重置</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

let emit = defineEmits(['search']);

// 项目筛选信息
const formData = ref({
    title: '',
    createName: '',
    createSource: '',
    releaseStatus: '',
    releasePosition: '',
    toppingStatus: '',
    createTime: ''
})

// 发布状态下拉框数据
const statusList = ref([]);

// 发布位置下拉框数据
const positionList = ref([])

// 置顶状态下拉框数据
const toppingList = ref([]);

// 搜索
function search () {
    emit('search');
}

// 重置筛选条件
function clear () {
    Object.keys(formData.value).forEach(key => {
        formData.value[key] = '';
    })
    emit('search');
}

// 获取筛选参数
function getFilterInfo () {
    return formData.value;
}

</script>

<style lang="scss" scoped>
.header-search-wrap {
    display: flex;
    flex-wrap: wrap;
    .left-content {
        flex: 1;
    }
    .right-content {
        width: 132px;
    }
    .w150 {
        width: 150px;
    }
    .w100 {
        width: 100px;
    }
}
</style>